<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-handle">
                <div>
                    <el-button @click="exportBatch">批量导出</el-button>
                </div>
            </div>

            <div class="layout-container-form-search">
                <div>
                    <el-input v-model="page.po.name" placeholder="请输入名称" clearable />
                </div>
                <div>
                    <el-select v-model="page.po.province" placeholder="省份" clearable @change="getTableData">
                        <el-option v-for="item in provinceList" :label="item" :value="item" />
                    </el-select>
                </div>

                <div>
                    <el-button type="primary" :icon="Search" @click="getTableData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @getTableData="getTableData" @selection-change="(list:any)=>{gardenList = list}">
                <el-table-column type="selection" />

                <el-table-column type="index" label="列表" width="50" />

                <el-table-column prop="name" label="名称" align="left">
                    <template #default="scope">
                        <el-link type="success" @click="viewStatistics(scope.row)">{{ scope.row.name }}</el-link> &nbsp;
                    </template>
                </el-table-column>

                <el-table-column prop="dateStart" label="开始时间" width="120" :formatter="getDateStr"/>

                <el-table-column prop="dateEnd" label="结束时间" width="120" :formatter="getDateStr"/>

                <el-table-column prop="countAll" label="总评论数" width="100" />

                <el-table-column prop="countDianping" :show-overflow-tooltip="true" label="大众" align="left" width="100" />

                <el-table-column prop="countCtrip" :show-overflow-tooltip="true" label="携程" align="left" width="100" />

                <el-table-column prop="countQunaer" :show-overflow-tooltip="true" label="去哪" align="left" width="100" />

                <el-table-column prop="countTongcheng" :show-overflow-tooltip="true" label="同程" align="left" width="100" />

                <el-table-column label="操作" align="center" fixed="right" width="100">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="exportGarden(scope.row)">导出</el-button>
                    </template>
                </el-table-column>
            </Table>
        </div>

        <ExportPop :popData="exportData" @commitDone="exportCommit" />
    </div>
</template>

<script setup lang="ts">
import {onActivated, reactive, ref}                                         from 'vue'
import {gardenExport, page as gardenPage, provinceList as loadProvinceList} from "@/api/garden"
import {Search,}                                                            from '@element-plus/icons-vue'
import Table                                                                from '@/components/table/index.vue'
import router                                                               from "@/router";
import fileSaver                                                            from "file-saver";
import {ElMessage}                                                          from "element-plus";
import ExportPop                                                            from "./export-pop/index.vue";
import {getDateStr}                                                         from "@/utils/time";

let exportMode        = "single"
const gardenList: any = ref([])
let gardenNow: any    = null

const exportData = ref({
    show: false,
})

/**
 * 批量导出
 */
function exportBatch() {
    if (gardenList.value.length === 0) {
        ElMessage.warning("请选择至少一个数据项")
        return
    }
    exportMode = "multiple"

    exportData.value.show = true
}

/**
 * 导出
 * @param garden
 */
function exportGarden(garden: any) {
    exportMode = "single"

    gardenNow = garden

    exportData.value.show = true
}

function exportCommit([startDate, endDate]: [any, any]) {
    let param = []
    if (exportMode === "single") {
        param.push({gardenId: gardenNow.id, startDate, endDate})
    }
    else {
        gardenList.value.forEach((garden: any) => {
            param.push({gardenId: garden.id, startDate, endDate})
        })
    }

    gardenExport(param).then(res => {
        let bstr  = window.atob(res.data);
        let n     = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        let file = new File([u8arr], "导出文件.xls", {type: 'application/vnd.ms-excel'});

        fileSaver.saveAs(file)
    })
}

/**
 * 查看统计
 */
function viewStatistics(garden: any) {
    router.push({
        path : "/garden/statistics",
        query: {
            gardenId  : garden.id,
            gardenName: garden.name,
        }
    })
}

interface PageInterface {
    current: any,
    size: any,
    total: any,
    orders: any,
    po: any,
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    orders : [{column: "id", asc: false}],
    po     : {
        province: null,
        name    : null,
    },
})

const loading   = ref(true)
const tableData = ref([])

/**
 * 获取表格数据
 * @author mbb
 */
const getTableData = () => {
    loading.value = true

    let pageQuery = Object.assign({}, page)
    delete pageQuery.total
    gardenPage(pageQuery).then(res => {
        tableData.value = res.data.records
        page.current    = res.data.current
        page.total      = res.data.total
    }).finally(() => {
        loading.value = false
    })
}

const provinceList = ref([])

function initParam() {
    loadProvinceList().then((res: any) => {
        provinceList.value = res?.data || []
    })
}

// -----------------------------主程序start-----------------------------------------
onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>

<style>

</style>

